<template>
	<view class="classification" :style="{height: pageHeight + 'px'}">
		<view class="search-top">
			<view class="icon-left">
				<u--image src="../../../static/images/icon-back.svg" width="16px" height="16px" style="margin: 0 auto;text-align: center;"></u--image>
			</view>
			<view class="search-input">
				<u--input
				    placeholder="请输入内容"
				    border="none"
					clearable
				    v-model="searchValue"
					:customStyle="{height: '28px', lineHeight: '28px', background: '#fff',padding: '8px 15px', borderRadius: '20px 20px 20px 20px',}"
				    @change="change"
				  >
					 <template slot="prefix">
						<u--image src="../../../static/images/search2.svg" width="17px" height="18px" mode=""></u--image>
					</template>
				</u--input>
			</view>
		</view>
		
		<view class="content-list">
			<view class="content-list-left">
				<text v-for="(item, index) in menuList" @click="changeMenu(index)" :key="index" class="left-menu" :class="[item.menuIndex === menuIndex ? 'menuActive' : '']">{{item.name}}</text>
			</view>
			<view class="content-list-right">
				<view class="list-right-top">
					<text class="contentMenu contentMenuActive">灭火类</text>
					<text class="contentMenu">专勤类</text>
					<text class="contentMenu">其他类</text>
					<text class="contentMenu" style="width: 32px;">
						<u--image src="../../../static/images/icon-arrow.svg" width="64" height="64" mode=""></u--image>
					</text>
				</view>
				<view class="list-right-list">
					<view class="list-tit list-tit-p">灭火类</view>
					<view style="margin-top: 15px;">
						<text class="list-tit list-tit-sub">水罐消防车（SG）</text>
						<text class="list-tit list-tit-sub">泡沫消防车（PM）</text>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="showPopup"  mode="right" :closeOnClickOverlay="true" :customStyle="{width: '300px',height: (pageHeight - 60) + 'px'}" @open="openPopup" @close="closePopup">
			<view class="popContent">
				<view style="position: fixed; margin-top: 0;padding-top: 0;display: block;width: 100%;height: 40px;line-height: 40px;background-color: #fff;">
					<view style="width: 30px;align-items: center;display: inline-block"><u--image src="../../../static/images/icon-back.svg" width="32" height="32" mode=""></u--image></view>
					<view style="width: 270px;text-align: center;display: inline-block;font-size: 16px;color: #2E3033;font-weight: normal;">更多</view>
				</view>
				<view class="content-list-wrap" v-for="item in 1">
					<view class="content-list-p">
						消防车
					</view>
					<view class="content-list-tag">
						<text class="tags activeTag">灭火类</text>
						<text class="tags">专勤类</text>
						<text class="tags">战勤保障类</text>
						<text class="tags">消防摩托车</text>
					</view>
				</view>
				<view class="btns">
					<text style="display: inline-block;width: 135px;height: 40px;line-height: 40px;border: 1px solid #EF312A;text-align: center;font-size: 14px;color: #EF312A;">取消</text>
					<text style="display: inline-block;width: 135px;height: 40px;line-height: 40px;background: #EF312A;color
					#fff;text-align: center;font-size: 14px;color: #fff;">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				pageHeight: 300,
				menuIndex: 0,
				showPopup: false,
				menuList: [
					{name: '消防车', menuIndex: 0},
					{name: '消防员防护装备', menuIndex: 1},
					{name: '抢险救援器材', menuIndex: 2},
					{name: '灭火剂', menuIndex: 3},
					{name: '消防船艇', menuIndex: 4},
					{name: '消防飞行器', menuIndex: 5},
				]
			}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
			})
		},
		components: {},
		methods: {
			changeMenu(index) {
				this.menuIndex = index
			},
			closePopup() {
				this.showPopup = false
			},
			openPopup() {},
		}
	}
</script>

<style lang="scss" scoped>
.classification {
	width: 100%;
	height: 100%;
	background-color: #F7F8FA;
	box-sizing: border-box;
	
	.search-top {
		display: flex;
		flex-direction: row;
		height: 44px;
		padding-top: 17px;
		
		.icon-left {
			width: 46px;
			flex: 0 0 46px;
			line-height: 44px;
			text-align: center;
			display: flex;
			align-items: center;
		}
		.search-input {
			flex: 1;
			height: 44px;
			line-height: 44px;
			margin-right: 15px;
		}
	}

	.content-list {
		margin-top: 23px;
		display: flex;
		
		.content-list-left {
			width: 120px;
			box-sizing: border-box;
			
			.left-menu {
				display: flex;
				height: 60px;
				justify-content: center;
				align-items: center;
				
				font-weight: normal;
				font-size: 16px;
				color: #2E3033;
				text-align: left;
				font-style: normal;
				text-transform: none;
				
			}
			.left-menu.menuActive {
				font-weight: normal;
				font-size: 16px;
				color: #EF312A;
			}
		}
		.content-list-right {
			flex: 1;
			
			.list-right-top {
				height: 32px;
				margin-top: 10px;
				
				.contentMenu {
					width: 61px;
					height: 32px;
					
					border-radius: 16px 16px 16px 16px;
					background-color: rgba(255, 255, 255, 1);
					display: inline-block;
					text-align: center;
					line-height: 32px;
					margin-right: 10px;
					font-weight: normal;
					font-size: 14px;
					color: rgba(46, 48, 51, 0.6);
					font-style: normal;
					text-transform: none;
					vertical-align: bottom;
				}
				.contentMenuActive {
					color: #EF312A;
					height: 30px;
					border: 1px solid #EF312A;
					background: rgba(223,41,34,0.05);
				}
			}
			.list-right-list {
				margin-top: 15px;
				margin-right: 15px;
				background-color: #fff;
				min-height: 150px;
				background: #FFFFFF;
				border-radius: 10px 10px 10px 10px;
				box-sizing: border-box;
				padding-bottom: 15px;
				padding-left: 15px;
				padding-right: 15px;


				.list-tit {
					font-weight: normal;
					font-size: 14px;
					color: #2E3033;
					text-align: left;
					font-style: normal;
					text-transform: none;
					display: block;
				}
				.list-tit-p {
					font-weight: 550;
					color: #2E3033;
				}
				.list-tit-sub {
					font-weight: normal;
					font-size: 14px;
					color: #2E3033;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 10px;
				}
			}
		}
	}
}

.popContent {
	width: 100%;
	height: 100%;
	padding-bottom: 55px;
	position: relative;
	overflow-y: scroll;
	
	.btns {
		position: fixed;
		width: 300px;
		height: 40px;
		bottom: 5px;
		right: 0;
		z-index: 700;
		text-align: center;
		background-color: #fff;
		
	}
	
	.content-list-wrap {
		width: 100%;
		box-sizing: border-box;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
		
		.content-list-p {
			font-weight: 550;
			font-size: 16px;
			color: #2E3033;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 0;
			margin-top: 0;
		}
		
		.content-list-tag {
			
			text-align: left;
			
		
			.tags {
				width: 81px;
				height: 32px;
				line-height: 32px;
				font-weight: normal;
				font-size: 14px;
				color: #2E3033;
				display: inline-block;
				background: rgba(46, 48, 51, 0.05);
				border-radius: 5px 5px 5px 5px;
				margin-right: 10px;
				margin-bottom: 10px;
				text-align: center;
			}
			.tags:nth-child(3n) {
				margin-right: 0;
			}
			
			.tags.activeTag {
				font-weight: normal;
				font-size: 14px;
				color: #EF312A;
				background: rgba(223,41,34,0.05);
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #EF312A;
			}
		}
	}
	
	
	
}
.popContent .content-list-wrap:first-child {
	padding-top: 40px !important;
	margin-bottom: 15px;
}

</style>